<script setup>
import Breadcrumb from "@/components/Breadcrumb.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { uploadImage, uploadDailyRecom, searchChinaData } from "@/api/admin";
import { Plus } from "@element-plus/icons-vue";
import { imageUrl } from "@/api/request.js";

const router = useRouter();
const breadcrumbData = [
  { name: "每日推荐", router: "/index" },
  { name: "上传推荐", router: "/daily-recom-upload" },
];

// 上传相关
const uploadEle = ref(null);
const uploadImgurl = ref("");
const loading = ref(false);

// 表单数据
const recomTitle = ref("");
const recoAddress = ref("");
const color = ref("");
const options = ref([]);

// 上传成功回调
const onSuccess = (response) => {
  uploadImgurl.value = response.data;
  uploadEle.value.clearFiles();
  ElMessage.success("上传成功");
};

// 上传失败回调
const onError = () => {
  ElMessage.error("上传图片失败");
};

// 远程搜索地址
const remoteMethod = async (keywords) => {
  if (!keywords) return;
  loading.value = true;
  try {
    const res = await searchChinaData({ keywords });

    if (res.code === 200 && res.data.length > 0) {
      options.value = res.data[0].citys.map((item) => ({
        value: item.cityName,
        label: item.cityName,
      }));
    } else {
      options.value = [];
    }
  } catch (error) {
    console.error("搜索失败:", error);
    options.value = [];
    ElMessage.error("搜索失败");
  } finally {
    loading.value = false;
  }
};

// 提交表单
const submitLoading = ref(false);
const handleSubmit = async () => {
  if (!uploadImgurl.value) {
    return ElMessage.warning("请上传图片");
  }

  submitLoading.value = true;
  try {
    const res = await uploadDailyRecom({
      imageUrl: uploadImgurl.value,
      title: recomTitle.value,
      address: recoAddress.value,
      color: color.value,
    });

    if (res.code === 200) {
      ElMessage.success("提交成功");
      router.push("/index");
    }
  } catch (error) {
    ElMessage.error("提交失败");
  } finally {
    submitLoading.value = false;
  }
};
</script>

<template>
  <div class="upload-page">
    <Breadcrumb :pagData="breadcrumbData" />
    <div class="content-main">
      <div class="content-wrapper">
        <!-- 左侧上传区域 -->
        <div class="left-section">
          <el-upload
            ref="uploadEle"
            :action="imageUrl"
            accept=".jpg,.png,.jpeg,.webp"
            :limit="1"
            :show-file-list="false"
            :on-success="onSuccess"
            :on-error="onError"
          >
            <div class="upload-area">
              <div v-if="!uploadImgurl" class="upload-placeholder">
                <el-icon :size="20"><Plus /></el-icon>
                <span>建议上传大小不超过500kb，宽为900px，高为1280px</span>
              </div>
              <div v-else class="preview-wrapper">
                <img :src="uploadImgurl" alt="预览图" />
              </div>
            </div>
          </el-upload>
        </div>

        <!-- 右侧表单区域 -->
        <div class="right-section">
          <div class="form-item">
            <p>标题</p>
            <el-input v-model="recomTitle" placeholder="输入标题" />
          </div>

          <div class="form-item">
            <p>地址</p>
            <el-select
              v-model="recoAddress"
              filterable
              remote
              reserve-keyword
              placeholder="搜索景点地址"
              :remote-method="remoteMethod"
              :loading="loading"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>

          <div class="form-item">
            <p>颜色值</p>
            <el-color-picker v-model="color" show-alpha />
          </div>

          <div class="submit-section">
            <el-button
              type="primary"
              :loading="submitLoading"
              @click="handleSubmit"
            >
              提交
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.upload-page {
  width: 100%;

  .content-main {
    padding: 60px 200px;

    .content-wrapper {
      display: flex;
      gap: 40px;

      .left-section {
        .upload-area {
          border: 1px dashed rgba(0, 0, 0, 0.3);
          width: 200px;
          height: 300px;
          border-radius: 4px;
          overflow: hidden;

          .upload-placeholder {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: rgba(0, 0, 0, 0.3);

            span {
              padding: 10px 20px;
              text-align: center;
            }
          }

          .preview-wrapper {
            height: 100%;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }
      }

      .right-section {
        flex: 1;

        .form-item {
          display: flex;
          align-items: center;
          margin-bottom: 30px;

          p {
            width: 200px;
            text-align: center;
          }

          :deep(.el-input),
          :deep(.el-select) {
            width: 100%;
          }
        }

        .submit-section {
          padding-top: 20px;
        }
      }
    }
  }
}
</style>
